<template>
  <div style="margin: 10px 0">
    <el-input v-model="search" style="width: 20%" placeholder="请输入关键字" clearable/>
    <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
    <el-button type="primary" style="float: right;margin-right: 20px" @click="add" v-if="str.role === '管理员'">新增
    </el-button>
  </div>
  <div>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="id" sortable label="ID"/>
      <el-table-column label="头像">
        <template #default="scope">
          <el-image style="width: 50px; height: 50px" :src="scope.row.avatar"
                    :preview-src-list="[scope.row.avatar]"
                    preview-teleported="true"/>
        </template>
      </el-table-column>
      <el-table-column prop="username" sortable label="用户名"/>
      <el-table-column prop="nickName" label="昵称"/>
      <el-table-column prop="role" label="角色"/>
      <el-table-column prop="age" label="年龄"/>
      <el-table-column prop="sex" label="性别"/>
      <el-table-column prop="telephone" label="电话号码"/>
      <el-table-column fixed="right" label="操作" width="120vh" v-if="str.role === '管理员'">
        <template #default="scope">
          <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="text" style="color: red">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="margin: 10px 0">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <el-dialog v-model="dialogVisible"  title="编辑员工" width="500">
      <el-form :model="form" label-width="80px">
        <el-form-item label="头像">
          <el-upload ref="upload"
                     action="http://localhost:9090/files/upload"
                     :on-success="filesUploadSuccess"
                     :file-list="fileList"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名"  prop="username">
          <el-input v-model="form.username" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickName" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-radio v-model="form.role" label="员工">员工</el-radio>
          <el-radio v-model="form.role" label="管理员">管理员</el-radio>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number :min="1" v-model="form.age" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="form.telephone" style="width: 80%"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script>
import request from "@/utils/request";
import router from "@/router";
import {ElMessage} from "element-plus";
import {reactive,ref} from "vue";

export default {
  name: 'Employee',
  components: {},
  data() {
    return {
      form: {},
      formRef: ref(),
      dialogVisible: false,
      input: '',
      search: '', //搜索框
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 10,
      tableData: [],
      str: {},
      fileList: [],
    }
  },
  created() {
    this.str = JSON.parse(localStorage.getItem("xm-pro-employee"))
    console.log(this.str)
    this.load()

  },
  methods: {
    filesUploadSuccess(res) {
      console.log(res)
      this.form.avatar = res.data
    },
    load() {
      request.get("/employee/page", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    add() {
      this.dialogVisible = true
      this.form = {}
      this.fileList = [];
    },
    save() {
      if (this.form.id) {
        //修改
        request.put("/employee", this.form).then(res => {
          if (res.code === '0') {
            this.$message.success("修改成功")
            this.dialogVisible = false
            this.load()
          } else {
            this.$message.error(res.msg)
          }
          console.log(res)
        })
      } else {
        //新增
        if(this.form.username==null){
          this.$message.error("用户名不能为空")
        }else{
          if(this.form.role==null){
            this.$message.error("角色不能为空")
          }else{
            request.post("/employee", this.form).then(res => {
              if (res.code === '0') {
                this.$message.success("添加成功")
                this.dialogVisible = false
                this.load()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        }

      }
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
      this.fileList = [];
    },
    handleDelete(id) {
      if (this.str.id == id) {
        this.$message.success("不能删除本人信息")
      } else {
        request.delete("/employee/" + id).then(res => {
          if (res.code === '0') {
            this.$message.success("删除成功")
            this.load()
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    handleSizeChange() {
      this.load()
    },
    handleCurrentChange() {
      this.load()
    }
  }
}
</script>

